<template>
    <div>
        <div class="deatil_cont">
            <div class="deatil_cont_box">
                <div class="deatil_cont_box_top">
                    <div class="img"></div>
                    <span>迅构云社区 > 技术应用 > 开发者论坛一周精粹（第四十二期）晒代码千元话费送不停 免费证书</span>
                </div>
                <div class="deatil_cont_box_mid">
                    <div class="deatil_cont_box_mid_left">
                        <img src="../../assets/img/user_lz_img.png" alt="">
                        <!--<img :src="urlimg" alt="">-->

                        <div class="deatil_cont_box_mid_left_user">
                            <div>楼主</div>
                            <div>
                                <!--看见猪儿跑滴滴-->
                                {{userdata.nickName}}
                            </div>
                        </div>
                    </div>
                    <div class="deatil_cont_box_mid_right">
                        <div class="mid_right_title">
                            <span>
                                {{deatildata.title}}
                                <!--开发者论坛一周精粹(第四十二期) 晒代码千元话费送不停 免费证书？-->

                            </span>
                            <div class="mid_right_title_time">
                                发表于{{deatildata.pushTime}}
                                <!--2018-05-11 12:30-->
                                <div class="img1"></div>
                                <span>{{deatildata.read | isnum}}</span>
                                <div class="img2"></div>
                                <!--<img src="../../assets/img/deatil_comments.svg" alt="">-->
                                <span>{{deatildata.reply | isnum}}</span>
                            </div>
                            <div class="mid_right_title_type">
                                <div>技术与应用</div>
                                <div>综合讨论</div>
                                <div>技术与应用</div>
                                <div>技术与应用</div>
                                <div>技术与应用</div>
                                <div>技术与应用</div>
                                <div>技术与应用</div>
                                <div>建议与意见</div>
                            </div>
                        </div>
                        <div class="mid_right_cont">
                            <div class="mid_right_cont_txt" style="">
                                <!--{{deatildata.content}}-->
                                    <p style="white-space: pre-line;position: relative;top: -35px;">
                                        {{deatildata.content}}
                                   </p>



                               <!-- 轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                目前最大的更新就是已经全面支持windows2008 R2和windows2012 R2系统了。
                                虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，还是需要手动配置，
                                现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。 如果是更换系统，
                                首先进入轻量应用服务器网页控制台
                                <br>
                                <br>
                                <br>
                                点击重置系统-》系统镜像选择win2012，点击确定更改。
                                系统创建成功后，我们进入管理控制台，点击远程连接，建立远程连接的密码。
                                其中第一个6位数的密码是网页连接远程服务器时需要输入的密码，
                                第二个服务器管理密码是服务器管理员administrator的密码。 密码设置好后，
                                我们连接远程桌面，进行asp+access运行环境配置 按组合键win+R进入打开cmd运行框
                                ，输入mstsc，打开远程桌面连接，输入服务器ip地址，用户名用administrator，
                                密码用你上面设置的服务器管理密码，连接远程桌面-->


                            </div>
                            <div class="mid_right_cont_img">
                                <div class="mid_right_cont_img_title">
                                    <div class="img"></div>
                                    <!--<img src="../../assets/img/deatil_img_show.svg" alt="">-->
                                    图片
                                </div>
                                <div class="mid_right_cont_img_list">
                                    <img src="../../assets/img/deatil_img_list1.png" alt="">
                                    <img src="../../assets/img/deatil_img_list2.png" alt="">
                                </div>

                            </div>
                            <div class="mid_right_cont_question">
                                <div class="mid_right_cont_question_title">
                                    <div class="img"></div>
                                    <!--<img src="../../assets/img/deatil_img_editor.svg" alt="">-->
                                    编辑问题
                                </div>
                                <div class="mid_right_cont_question_list">
                                    <div class="mid_right_cont_question_list_title">快速回复</div>
                                    <div class="mid_right_cont_question_list_int">
                                        <input type="text">
                                        <div>提交</div>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="mid_right_answer">
                            <div class="mid_right_answer_title">{{deatildata.reply}}条回答 </div>
                            <div class="mid_right_answer_list">
                               <!-- <div class="mid_right_answer_list_item">
                                    <div class="mid_right_answer_list_item_user">
                                        <img src="../../assets/img/deatil_comm_list1.png" alt="">
                                    </div>
                                    <div class="mid_right_answer_list_item_comment">
                                        <div class="triangle-topright "></div>
                                        <div class="list_item_comment_user">
                                            <span>红衣人</span>
                                            <span>2小时前</span>
                                        </div>
                                        <div class="list_item_comment_txt">
                                            轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                            目前最大的更新就是已经全面支持windows2008R2和在有工windows2012 R2系统了。
                                            虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，
                                            还是需要手动配置有现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。
                                            如果是更换系统，首先进入轻量应用服务器网页控制台
                                        </div>
                                    </div>
                                </div>
                                <div class="mid_right_answer_list_item">
                                    <div class="mid_right_answer_list_item_user">
                                        <img src="../../assets/img/deatil_comm_list1.png" alt="">
                                    </div>
                                    <div class="mid_right_answer_list_item_comment">
                                        <div class="triangle-topright "></div>
                                        <div class="list_item_comment_user">
                                            <span>红衣人</span>
                                            <span>2小时前</span>
                                        </div>
                                        <div class="list_item_comment_txt">
                                            轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                            目前最大的更新就是已经全面支持windows2008R2和在有工windows2012 R2系统了。
                                            虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，
                                            还是需要手动配置有现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。
                                            如果是更换系统，首先进入轻量应用服务器网页控制台
                                        </div>
                                    </div>
                                </div>
                                <div class="mid_right_answer_list_item">
                                    <div class="mid_right_answer_list_item_user">
                                        <img src="../../assets/img/deatil_comm_list1.png" alt="">
                                    </div>
                                    <div class="mid_right_answer_list_item_comment">
                                        <div class="triangle-topright "></div>
                                        <div class="list_item_comment_user">
                                            <span>红衣人</span>
                                            <span>2小时前</span>
                                        </div>
                                        <div class="list_item_comment_txt">
                                            轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                            目前最大的更新就是已经全面支持windows2008R2和在有工windows2012 R2系统了。
                                            虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，
                                            还是需要手动配置有现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。
                                            如果是更换系统，首先进入轻量应用服务器网页控制台
                                        </div>
                                    </div>
                                </div>
                                <div class="mid_right_answer_list_item">
                                    <div class="mid_right_answer_list_item_user">
                                        <img src="../../assets/img/deatil_comm_list1.png" alt="">
                                    </div>
                                    <div class="mid_right_answer_list_item_comment">
                                        <div class="triangle-topright "></div>
                                        <div class="list_item_comment_user">
                                            <span>红衣人</span>
                                            <span>2小时前</span>
                                        </div>
                                        <div class="list_item_comment_txt">
                                            轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                            目前最大的更新就是已经全面支持windows2008R2和在有工windows2012 R2系统了。
                                            虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，
                                            还是需要手动配置有现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。
                                            如果是更换系统，首先进入轻量应用服务器网页控制台
                                        </div>
                                    </div>
                                </div>-->
                                <div class="mid_right_answer_list_item" v-for="item in replyList ">
                                    <div class="mid_right_answer_list_item_user">
                                        <!--<img src="../../assets/img/deatil_comm_list1.png" alt="">-->
                                        <img :src="item.headPic" alt="">
                                    </div>
                                    <div class="mid_right_answer_list_item_comment">
                                        <div class="triangle-topright "></div>
                                        <div class="list_item_comment_user">
                                            <span>
                                                <!--红衣人-->
                                                {{item.nickName}}
                                            </span>
                                            <span>
                                                <!--2小时前-->
                                                {{item.replyTime | changeDate}}
                                            </span>
                                        </div>
                                        <div class="list_item_comment_txt">
                                            <p style="white-space: pre-line;position: relative;top: -30px;">
                                                {{item.content}}
                                            </p>
                                           <!-- 轻量应用服务器已经推出一段时间了，相比第一次内测来说，
                                            目前最大的更新就是已经全面支持windows2008R2和在有工windows2012 R2系统了。
                                            虽然有预装asp/.net应用镜像，但是相对比较早的asp+access网站来说，
                                            还是需要手动配置有现在我们就来配置这个环境吧，让asp+access网站，也能轻松搬家到阿里云。
                                            如果是更换系统，首先进入轻量应用服务器网页控制台-->
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="loading">下拉加载更多</div>

                    </div>
                </div>
            </div>
        </div>
        <div class="deatil_footer">
        </div>
    </div>
</template>

<script>
//    import Navi from '../../components/Navi'
import axios from 'axios';
import {HttpRs} from '../../stataic/staticApi.js'
import {PublicHttp} from '../../stataic/sign.js'
    export default {
        data(){
            return {
                /*获取主题详情url*/
                url:'',
                PostId:"18129101b6cf",
                /*帖子详情*/
                deatildata:"",
                /*用户信息*/
                userdata:'',
                /**/
                usertopic:"",
                /*用户头像*/
                urlimg:'https://cdn.joinquant.com/common/img/default_header-2.png',
                /*用户评论*/
                replyList:'',

            }
        },
        created(){



            this.getDataDeatil()
            this.getDataReply()
            this.getOneReply()


//                 HttpRs('http://192.168.3.237:5000/webapi/Community/Reply?PostId=212332323','get','').then(function (response) {
//             console.log(66666666666666666666)
//             console.log(response)
//             })
//            HttpRs('http://192.168.3.237:5000/webapi/Community/Reply','get','212332323').then(function (response) {
//                console.log('请求主题回复测试')
//                console.log(response)
//            })


        },
        methods: {
            /*获得主题详情*/
            getDataDeatil(){
                var that = this
                console.log(this.PostId)
                console.log(PublicHttp())
                this.url = PublicHttp()+ '/webapi/Community/Details/'+ this.PostId
                console.log(this.url)

                HttpRs(this.url,'get','').then(function (response) {
                    console.log('111111111111111111111')
                    console.log('请求主题详情')
                    console.log(response.data.data)
                    that.deatildata = response.data.data
                    that.userdata = response.data.data.u
                    that.usertopic = response.data.data.userTopic
                    console.log(that.deatildata)
                    console.log(that.userdata)
                    console.log(that.usertopic)
                })

            },
            /*获得主题回复  暂无数据*/
            getDataReply(){
                this.fetchs.GetDatasdes({
                    url:'/webapi/Community/Reply',
                    type:'get',
                    param:{
                        PostId:this.PostId ,
                    },
                    success:(ret)=>{
                        console.log('请求主题回复')
                        console.log(ret)

                    },
                    error:(err)=>{

                    }
                })
            },
            /*获得单个主题回复*/
            getOneReply(){
                this.fetchs.GetDatasdes({
                    url:'/webapi/Community/Reply',
                    type:'get',
                    param:{
                        PostId:'212332323',
                    },
                    success:(ret)=>{
                        console.log('请求单个主题回复')
                        console.log(ret)
                        this.replyList = ret.data.rows

                    },
                    error:(err)=>{

                    }
                })
            },
        },
        components: {
//            Navi,
        },
        computed: {},
        watch: {}
    }
</script>
<style scoped>
    /*--------------------问题详情样式-------------------------*/
    /*top*/
    .deatil_top{
        width:100%;
        height:50px;
        background-color:rgba(51,51,51,1) ;
        display: flex;
        justify-content:center;
    }
    .deatil_top_box{
        width:1180px;
        height:50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .deatil_top_box_left{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #BEC7D3;
        text-align: left;
    }
    .deatil_top_box_right{
        /*border:1px solid red;*/
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .deatil_top_box_right>img{
        width:16px;
        height:16px;
        margin:0 10px;
    }
    .deatil_top_box_right img:first-child{
        width:32px;
        height:32px;
        margin-left: 0;
    }
    /*cont*/
    .deatil_cont{
        width:100%;
        display: flex;
        justify-content: center;

    }
    .deatil_cont_box{
        width:1180px;
        height:100%;
    }
    .deatil_cont_box_top{
        width:100%;
        height:86px;
        line-height: 86px;
    }
    /*----------------------------------------------------------------*/
    .deatil_cont_box_top>img{
        width:16px;
        height:16px;
    }
    .deatil_cont_box_top>.img{
        width:16px;
        height:16px;
        display: inline-block;
        background-image:url(/app/assets/img/deatil_home.svg) ;
        margin-right: 8px;
    }
    .deatil_cont_box_top>span{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        position: relative;
        top:-3px;
    }
    .deatil_cont_box_mid{
        display: flex;
        justify-content: space-between;
    }
    .deatil_cont_box_mid_left{
        width:200px;
        height:100%;
    }
    .deatil_cont_box_mid_left_user{
        width:160px;
        height:25px;
        margin:10px 0;
        display: flex;
        justify-content: flex-start;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;

    }
    .deatil_cont_box_mid_left_user>div:nth-child(1){
        width:49px;
        height:25px;
        background-color: rgba(253, 242, 193, 1) ;
        border:1px solid rgba(253, 226, 193, 1);
        line-height: 25px;
        text-align: center;
        margin-right: 10px;
    }
    .deatil_cont_box_mid_left_user>div:nth-child(2){
        width:125px;
        height:25px;
        line-height: 25px;
    }
    .deatil_cont_box_mid_right{
        width:980px;
        height:100%;
    }
    .mid_right_title{
        width:100%;
    }
    .mid_right_title>span{
        display: inline-block;
        height: 36px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 28px;
        line-height: 36px;
    }
    .mid_right_title_time{
        margin:10px 0;
        height: 20px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #666666;
        font-size: 14px;
    }
    /*----------------------------------------*/
    .mid_right_title_time>img{
        width:12px;
        height:12px;
        margin-left: 20px;
    }
    .mid_right_title_time>.img1{
        width:12px;
        height:12px;
        margin-left: 20px;
        display: inline-block;
        background-image:url(/app/assets/img/deatil_eyes.svg) ;
    }
    .mid_right_title_time>.img2{
        width:12px;
        height:12px;
        margin-left: 20px;
        display: inline-block;
        background-image:url(/app/assets/img/deatil_comments.svg) ;
    }
    .mid_right_title_time>span{
        font-size: 12px;
    }
    .mid_right_title_type{
        width:100%;
        display: flex;
        justify-content: flex-start;
        height:84px;

    }
    .mid_right_title_type>div{
        background-color:rgba(236, 244, 248, 1) ;
        border:1px solid rgba(196, 227, 247, 1);
        /*width:91px;*/
        padding:0 5px;
        height:32px;
        margin-bottom: 10px;
        margin-right: 10px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
    }
    .mid_right_txt{

    }
    .mid_right_cont_txt{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 40px;
    }
    .mid_right_cont_img_title,.mid_right_cont_question_title{
        margin:10px 0;
        height: 20px;
        font-family: '微软雅黑';
        font-weight: 400;
        line-height: 20px;
        font-style: normal;
        color: #666666;
        font-size: 14px;
    }
    /*----------------------------------------------------------------------*/
    .mid_right_cont_img_title>img,.mid_right_cont_question_title>img{
        width:16px;
        height:16px;
        margin-right: 5px;
    }

    .mid_right_cont_img_title>.img,.mid_right_cont_question_title>.img{
        width:16px;
        height:16px;
        margin-right: 5px;
        display: inline-block;
    }
    .mid_right_cont_img_title>.img{
        background-image:url(/app/assets/img/deatil_img_show.svg) ;
    }
    .mid_right_cont_question_title>.img{
        background-image:url(/app/assets/img/deatil_img_editor.svg) ;
    }
    .mid_right_cont_img_list{
        width:100%;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .mid_right_cont_img_list>img{
        width:180px;
        height:135px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .mid_right_cont_question_list{
        border-top:1px solid #f1f1f1;

    }
    .mid_right_cont_question_list_title{
        height: 21px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        margin-top: 50px;
        margin-bottom: 20px;
        color: #333;
    }
    .mid_right_cont_question_list_int{
        width:100%;
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
    }
    .mid_right_cont_question_list_int>input{
        width:870px;
        height:40px;
        border:1px solid #ccc;
        padding-left: 10px;
    }
    .mid_right_cont_question_list_int>input:focus{
        outline:none;
        border:1px solid rgba(49, 160, 227, 1);
        background-color: rgba(255, 255, 255, 1);
    }
    .mid_right_cont_question_list_int>div{
        width:80px;
        height:40px;
        line-height: 40px;
        text-align: center;
        background-color: rgba(49, 160, 227, 1);
        color: #fff;
    }
    /*回答*/
    .mid_right_answer{
        width:100%;
    }
    .mid_right_answer_title{
        height: 21px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
    }
    .mid_right_answer_list{
        width:100%;
    }
    .mid_right_answer_list_item{
        width:100%;
        height:100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .mid_right_answer_list_item_user{
        width:60px;
        height:60px;
        border-radius: 30px;
    }
    .mid_right_answer_list_item_user>img{
        width:60px;
        height:60px;
        border-radius: 30px;
    }
    .mid_right_answer_list_item_comment{
        width:880px;
        background-color: rgba(247, 247, 247, 1);
        position: relative;
    }
    .triangle-topright{
        position: absolute;
        top:0;
        left:-20px;
        width: 0;
        height: 0;
        border-top: 20px solid rgba(247, 247, 247, 1);
        border-left: 20px solid transparent;
    }
    /*.mid_right_answer_list_item_comment:before{*/
        /*content: '';*/
        /*position: absolute;*/
        /*top:0px;*/
        /*left:-10px;*/
        /*width:0;*/
        /*height:0;*/
        /*border-top:5px solid transparent;*/
        /*border-bottom:5px solid transparent;*/
        /*border-right:10px solid rgba(247, 247, 247, 1);*/
    /*}*/
    .list_item_comment_user{
        height:20px;
        margin:10px 0;
        /*padding-left: 10px;*/
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
    }
    .list_item_comment_user>span:nth-child(1){
        color: #31A0E3;
        margin:0 15px;
    }
    .list_item_comment_user>span:nth-child(2){
        color: #666;
    }
    .list_item_comment_txt{
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        line-height: 30px;
    }
    /*加载*/
    .loading{
        width:100%;
        height:80px;
        line-height: 80px ;
        text-align: center;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #999999;
    }
    /*底部*/
    .deatil_footer{
        width:100%;
        height:287px;
        background-color:rgba(74, 86, 105, 1) ;
    }

</style>